<template>
    <page class="boxoffice">
        <page-header>票房</page-header>
       
            <div class="content">
                <div class="top">
            <div class="top1">
                今天大盘:
                <span>
                    2300万
                </span>
            </div>
            <div class="top2">每30分钟更新一次，上次更新北京时间14:30</div>
        </div>
        <div class="row title">
            <div class="col">片名</div>
            <div class="col" style="flex-direction:column"><span>实时票房</span>(万元)</div>
            <div class="col">票房占比</div>
            <div class="col">拍片占比</div>
            <div class="col">上座率</div>
        </div>
        <div class="row">
            <div class="col">
                <div class="mn">复仇者联盟</div>
                <div>上映6天 32.52亿</div>
            </div>
            <div class="col money">4326.29</div>
            <div class="col">87.2%</div>
            <div class="col">74.5%</div>
            <div class="col">3.2%</div>
        </div>
       </div>
    </page>
</template>

<script>
export default {
    name:"boxoffice",
    data(){
        return {
            boxOfficeInfo:null
        }
    },
    created(){
        this.$http.get("/boxofficeMaoyan/promovie/api/box/second.json").then(res=>{
        
        }).catch(err=>{
        })
    },
    methods:{

    }
}
</script>

<style lang="scss" socped>
@import "../assets/css/comm.scss";
.boxoffice{
    @include flexbox(column);
    .content{
        flex: 1;
      overflow: auto;
      .top{
          box-sizing: border-box;
          padding: .2rem;
          .top1{
          span{
              color: #ff0000;
          }
      }
      .top2{
          color: #cccccc;
          font-size: .28rem;
      }
      }
      .row{
          @include flexbox();
          min-height: 1rem;
          &.title{
              background-color: rgba(255,0,0,.6);
              color: #ffffff;
          }
          .col{
              *{
                  font-size: .24rem;
              }
              flex: 1;
              @include flexbox();
              justify-content: center;
              align-items: center;
              font-size: .24rem;
              span{
                  font-size: inherit;
              }
              &.money{
                  color: red;
              }
          }
          .col:first-child{
              flex-direction: column;
              min-height: 1.9rem;
              text-align: center;
          }
      }
    }
}
</style>
